<template>
  <div style="padding-bottom: 40px;">
    <div class="title">智能预警</div>
    <div class="warn shadow">
      <SelectDateRange :start.sync="warnReq.startTime" :end.sync="warnReq.endTime" @change="getWarnList"></SelectDateRange>
    </div>
    <div class="warn-list">
      <template v-if="list.length == 0">
        <div class="">
        <el-empty description="暂无数据"></el-empty>
        </div>
      </template>
      <template v-else>
      <div class="item shadow" v-for="(item, index) in list" :key="index">
        <span class="type">{{item.alarmName}}</span>
        <div style="flex: 1">
          <div class="text">
            <span style="color: #cbcace">设备名称：</span>
            {{item.deviceName}}
          </div>
          <div class="text flex">
            <span style="color: #cbcace">内容：</span>
            <span class="text-over">{{item.content}}</span>
          </div>
          <div class="text">
            <span style="color: #cbcace">上报时间：</span>
            {{item.gmtReport}}
          </div>
          <div class="text">
            <span style="color: #cbcace">地址：</span>
            {{item.address||'--'}}
          </div>
        </div>
        <div class="text">
          <el-button type="text" size="mini" @click="overlook(item)">忽略</el-button>
          <!-- <el-button type="text" size="mini" @click="openNotice(item)">开单</el-button>
          <el-button type="text" size="mini" @click="toEvent(item)">派单</el-button> -->
        </div>
      </div>
      </template>
    </div>

  </div>
</template>
<script>
import {alarmList, alarmIgnore} from '@/api/alarm'
export default {
  components: {},
  data() {
    return {
      warnReq: {},
      list: [],
      current: {},
      showToEvent: false,
      showNotice: false
    };
  },
  mounted() {
    this.getWarnList()
  },
  methods: {
    async getWarnList() {
      try {
        const res = await alarmList(this.warnReq)
        if(res.data) {
          this.list = res.data.filter(item => {
            return item.status == 1 && item.transferEvent == 0
          })
        }else{
          this.list = []
        }
      } catch (error) {

      }
    },
    overlook(row) {
      this.$modal.confirm('确定忽略此告警吗？').then((res) => {
        // 请求服务器删除数据
        alarmIgnore({ id: row.id }).then((res) => {
          // 刷新数据
          this.getWarnList();
        });
      });
    },
    // 转事件
    toEvent(row) {
      this.current = {
        id: row.id
      };
      this.showToEvent = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.warn {
  margin: 15px 0;
  padding: 20px;
}
.warn-list {
  .item {
    padding: 17px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .type {
      margin-right: 20px;
      flex-shrink: 0;
      padding: 7px 10px;
      font-size: 18px;
      font-weight: 500;
      color: #819fff;
      background: #eff2ff;
      border-radius: 8px;
    }
    .text {
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
    }
    .text-over {
      max-width: 350px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
